<template>
  <CesiumBox ref="container"></CesiumBox>
</template>

<script setup>
import CesiumBox from "../../components/CesiumBox.vue";
import { ref, onMounted } from "vue";
import * as Cesium from "cesium";

const container = ref(null);
let cesiumPara = null;
let previousTime;

function addPostProcessStages() {
  //黑白色后处理
  cesiumPara.viewer.scene.postProcessStages.add(
    Cesium.PostProcessStageLibrary.createBlackAndWhiteStage()
  );

  //添加自转
  cesiumPara.viewer.clock.onTick.addEventListener(() => {
    let currentTime = cesiumPara.viewer.clock.currentTime.secondsOfDay;
    let delta = (currentTime - previousTime) / 1000;
    previousTime = currentTime;
    cesiumPara.viewer.scene.camera.rotate(Cesium.Cartesian3.UNIT_Z, -delta);
  });
}

onMounted(() => {
  cesiumPara = container.value.cesiumPara;
  cesiumPara.viewer.clock.multiplier = 50;
  cesiumPara.viewer.clock.shouldAnimate = true;
  previousTime = cesiumPara.viewer.clock.currentTime.secondsOfDay;
  addPostProcessStages();
});
</script>
